<!--投票选项-->
<template>
  <div
    class="content-choose"
    :class="{
      'content-choose-subOptions': type === SUB_OPTIONS,
    }"
  >
    <!--选项标题-->
    <div class="choose-title" v-if="type === SUB_OPTIONS">
      <span>子题目设置</span>
      <!--删除按钮-->
      <el-popconfirm title="是否确认删除该组名称?" width="220" @confirm="deleteTheChild()">
        <template #reference>
          <el-icon><Delete /></el-icon>
        </template>
      </el-popconfirm>
    </div>
    <!--题目描述-->
    <textInputBoxComponent :ordinalValue="`${item.id}、`" title="题目描述" v-model:value="item.desc"></textInputBoxComponent>
    <!--题目字体大小-->
    <textInputBoxComponent type="number" title="题目字体大小" v-model:value="cssStyle.topicFontSize"></textInputBoxComponent>
    <!--内容字体大小-->
    <textInputBoxComponent type="number" title="内容字体大小" v-model:value="cssStyle.contentFontSize"></textInputBoxComponent>
    <!--选项规则-->
    <optionTypeComponent title="选项规则" :options="SELECT_RULE" v-model:value="item.selectRule"></optionTypeComponent>
    <!--添加规则选项-->
    <div class="choose-add">
      <div class="name">关联规则</div>
      <el-button type="danger" @click="addOptions('rules', item.assocRules)" class="body-check-btn">添加关联</el-button>
    </div>
    <!--关联规则-->
    <div class="choose-options">
      <div v-for="(list, index) in item.assocRules" class="options-item">
        <span>第</span>
        <el-select v-model="list.questionId" size="small" placeholder="请选择">
          <el-option v-for="item in questionNumberCalculation" :key="item.id" :label="item.id" :value="item.id" />
        </el-select>
        <span>题选</span>
        <el-select v-model="list.optionIds" multiple placeholder="请选择">
          <el-option v-for="item in optionCalculation(list.questionId)" :key="item" :label="item" :value="item" />
        </el-select>
        <span>则</span>
        <el-select v-model="list.relation" size="small" @change="emptyDisableIds(list)">
          <el-option v-for="item in TYPE_RULES" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
        <el-select
          v-model="list.disableIds"
          multiple
          placeholder="全部"
          :selectedLabel="changeDisableIds(list)"
          v-if="list.relation === 'disabled' && type !== 'shortAnswerQuestion'"
        >
          <el-option v-for="item in blanketOption(item.options)" :key="item" :label="item" :value="item" />
        </el-select>
        <el-icon @click="deleteRules(item, index)"><CircleClose /></el-icon>
      </div>
    </div>
    <!--选项类型-->
    <optionTypeComponent
      v-if="type !== 'shortAnswerQuestion'"
      title="选项类型"
      :options="SUBTOPIC_TYPE"
      v-model:value="item.selectType"
      v-model:selectMaxNum="item.selectMaxNum"
    ></optionTypeComponent>
    <!--答题反馈-->
    <optionTypeComponent
      v-if="type === 'mainOptions'"
      title="是否需要答题反馈"
      :options="REQUIRED"
      v-model:value="item.needFeedback"
    ></optionTypeComponent>
    <!--最大选项数-->
    <optionTypeComponent
      v-if="item.selectType === 'checkbox'"
      title="最多选"
      :options="optionNumList(item.options)"
      v-model:value="item.selectMaxNum"
    ></optionTypeComponent>
    <template v-if="type !== 'shortAnswerQuestion'">
      <!--添加选项-->
      <div class="choose-add">
        <div class="name">选项和描述（描述非必填）</div>
        <el-button type="danger" @click="addOptions('options', item.options)" class="body-check-btn">添加选项</el-button>
      </div>
      <!--选项-->
      <div class="choose-options">
        <div v-for="(list, index) in item.options" class="options-item">
          <el-input v-model="list.id" maxlength="100" />
          <el-input v-model="list.desc" placeholder="请输入描述" maxlength="500" />
          <el-tooltip effect="light" content="是否需要填写原因" placement="top-end">
            <el-switch v-model="list.needReason" inline-prompt :active-icon="Check" :inactive-icon="Close" />
          </el-tooltip>
          <el-icon @click="deleteTheSuboption(item, index)"><CircleClose /></el-icon>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import optionTypeComponent from "@/components/FormComponents/optionTypeComponent.vue";
import textInputBoxComponent from "@/components/FormComponents/textInputBoxComponent.vue"; //文本输入框组件
import { useTemplateEditing } from "@/store/modules/templateEditing";
import {
  REQUIRED,
  SELECT_RULE,
  SUBTOPIC_TYPE,
  TYPE_RULES,
  REQUIRED_TYPE,
  SUB_OPTIONS,
  OPTION_DEFAULT,
  ADD_SUB_OPTIONS,
} from "@/utils/mockConfiguration/mockConfig";
import { Check, CircleClose, Close, Delete } from "@element-plus/icons-vue";
import { cloneDeep } from "lodash";
import { storeToRefs } from "pinia";
const templateEditing = useTemplateEditing();
const { templateSettings, templatePage } = storeToRefs(templateEditing);
const { businessData } = templateSettings.value; //模板数据
const props = defineProps({
  //类型
  type: {
    type: String,
    required: true,
  },
});
/**
 * 选项数据
 */
const item = defineModel("item", {
  type: Array,
  required: true,
});
/**
 * 选项样式
 */
const cssStyle = defineModel("cssStyle", {
  type: Object,
  required: false,
});
/**
 * 当关联规则为必答时清空禁止选项
 * @param value 当前规则
 */
const emptyDisableIds = value => {
  if (value.relation === REQUIRED_TYPE) {
    value.disableIds = [];
  }
};
//监听当前选项长度
const optionsLength = computed(() => item.value?.options?.length);
//当关联规则的禁答选项长度等于当前选项长度时清空禁答选项
const changeDisableIds = value => {
  const {
    disableIds,
    disableIds: { length },
  } = value;
  value.disableIds = length === optionsLength.value ? [] : disableIds;
};
/**
 * 计算选项数量
 * @param data 数据
 * @returns {{label: string, value}[]}
 */
const optionNumList = data =>
  data.map((item, index) => ({
    label: `${index + OPTION_DEFAULT}个`,
    value: index + OPTION_DEFAULT,
  }));
/**
 * 删除子选项,并且重新排序
 * @param value 删除的索引
 */
const deleteTheChild = value =>
  (businessData.subQuestion = businessData.subQuestion
    .filter((item, index) => value !== index)
    .map((item, index) => ({
      ...item,
      id: index + OPTION_DEFAULT,
    })));
/**
 * 添加子选项的选项
 * @param type 类型
 * @param data 数据
 */
const addOptions = (type, data) => data.push(cloneDeep(ADD_SUB_OPTIONS[type]));
/**
 * 删除子选项的选项
 * @param data 删除的数据
 * @param value 删除的索引
 */
const deleteTheSuboption = (data, value) => {
  data.options = data.options.filter((item, index) => value !== index);
  data.selectMaxNum = OPTION_DEFAULT;
};
/**
 * 删除规则
 * @param data 删除的数据
 * @param value 删除的索引
 */
const deleteRules = (data, value) => (data.assocRules = data.assocRules.filter((item, index) => value !== index));
/**
 * 计算题目序号,当为选择题模块时,计算不包含当前题号的序号,businessData为当前选择模块的数据
 */
const questionNumberCalculation = computed(() =>
  templatePage.value
    .filter(item => {
      const {
        moduleId,
        businessData: { id },
      } = item;
      return moduleId === "choiceQuestion" && id !== businessData.id;
    })
    .map(list => list.businessData),
);
/**
 * 计算当前序号题目的选项
 * @type {ComputedRef<function(*): *>}
 */
const optionCalculation = computed(
  () => id =>
    //因为下拉选择之后只拿到了选择的题目id，所以要去questionNumberCalculation匹配对应的选项id作为新的下拉选项的数据。questionNumberCalculation为除开当前选择题之外的选择题数据。
    questionNumberCalculation.value.find(item => item.id === id)?.options.map(list => list.id),
);
/**
 * 计算当前题号所有选项
 * @type {function(*): *}
 */
const blanketOption = data => data.map(item => item.id);
</script>

<style scoped lang="less">
//选择题模块
.content-choose {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  .choose-title {
    display: flex;
    justify-content: space-between;
  }
  //公共标题
  .name {
    font-size: 18px;
    color: #351d1d;
    font-weight: 400;
    margin-bottom: 14px;
  }
  //添加选项
  .choose-add {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .choose-options {
    padding: 5px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    .options-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      column-gap: 5px;
      span {
        font-size: 17px;
        font-weight: 300;
      }
      //选项
      .el-input {
        &:nth-of-type(1) {
          width: 40%;
        }
      }
      //附件条件
      :deep(.el-select) {
        height: auto;
        .el-select__selected-item.el-select__placeholder {
          font-size: 16px;
        }
        &:nth-of-type(1) {
          width: 35%;
        }
        &:nth-of-type(3) {
          width: 45%;
        }
        .el-select__wrapper {
          min-height: @InputHeight;
        }
      }
      .el-icon {
        font-size: 20px;
        color: @buttonColor;
        cursor: pointer;
      }
    }
  }
}
//子选项
.content-choose-subOptions {
  padding: 20px 30px;
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
</style>
